<template>
	<div class="transferRecord">
		<Table :tableData="tableData">
			<template slot="btn">
				<el-table-column width="200px" align="center" label="工作流步骤完成情况">
					<template slot-scope="scope">
						<span v-if="!scope.row.hasBizflow">- -</span>
						<el-button v-else class="detail-btn" size="mini" @click="WorkFlowConditionDetail(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</template>
		</Table>
		<br />
		<PageSize :pages="checkData" @changePageSize="changeTransferPageSize" @changeCurrentPage="changeTransferCurrentPage" />
		<!-- 人工工作流完成情况详情组件 -->
		<WorkFlowCondition :showWorkFlowCondition="showWorkFlowCondition" :type="flowType" :workFlowData="workFlowData" @closeWorkFlowCondition="closeWorkFlowCondition" />
		<!-- Ai工作流 完成情况详情组件 -->
		<AiWorkFlowCompleted v-if="showBpmn" :showBpmn="showBpmn" :allfinshedNodes="allfinshedNodes" :workFlow="workFlow" @close="closeAiWorkFlow" />
	</div>
</template>
<script>
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
import WorkFlowCondition from './FileComponent/WorkFlowCondition.vue';
import AiWorkFlowCompleted from './AiWorkFlowCompleted.vue';
import { getTransferList, getWorkflowCompletedDetail } from '../../api/api';

export default {
	components: {
		Table,
		PageSize,
		WorkFlowCondition,
		AiWorkFlowCompleted
	},
	props: {
		sessionId: {
			require: true,
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			tableData: {
				sort: false,
				checkedGroup: true,
				//表头
				tableHead: [
					{
						label: '接听时间',
						prop: 'transferTime'
					},
					{
						label: '会话业务场景名称',
						prop: 'transferScenarioName'
					},
					{
						label: '会话用户ID',
						prop: 'transferAgentId'
					},
					{
						label: '用户角色',
						prop: 'customerRole'
					},
					{
						label: '转接结果',
						prop: 'transferResult'
					},
					{
						label: '转接原因',
						prop: 'transferReason'
					},
					{
						label: '失败原因',
						prop: 'failReason'
					},
					{
						label: '接听类型',
						prop: 'transferType'
					},
					{
						label: '挂断时间',
						prop: 'endTime'
					}
				],
				//表格数据
				total: 0,
				tableConent: [],
				showIndex: true,
				showCheck: false
			},
			checkData: {
				page: 1,
				pageSize: 10,
				total: 0
			},
			// 工作流完成情况
			showWorkFlowCondition: false,
			workFlow: {},
			workFlowData: {
				sort: false,
				showIndex: false,
				showCheck: false,
				tableHead: [
					{
						label: '工作流步骤',
						prop: 'workFlowStep'
					},
					{
						label: '操作员ID',
						prop: 'operatorID'
					},
					{
						label: '完成情况',
						prop: 'finishCondition'
					},
					{
						label: '完成时间',
						prop: 'finishTime'
					}
				],
				tableConent: []
			},
			showBpmn: false,
			allfinshedNodes: [],
			invitationId: '' //邀请的ID
		};
	},
	async mounted() {
		// this.workFlowData = JSON.parse(sessionStorage.getItem('bpmn'));
		await this.initTransferRecordList()
			.then()
			.catch(() => {
				// this.$message.error('获取转接记录列表失败！');
			});
	},
	filter: {},
	methods: {
		initTransferRecordList() {
			return new Promise((resolve, reject) => {
				let data = {
					sessionId: this.sessionId,
					page: this.checkData.page,
					pageSize: this.checkData.pageSize
				};
				getTransferList(data)
					.then(res => {
						console.log(res.data, '接听记录详情');
						this.tableData.total = res.data.total;
						this.checkData.total = res.data.total || res.data.list.length;
						this.tableData.tableConent = res.data.list.map(item => {
							return {
								invitationId: item.invitationId ? item.invitationId : '- -',
								transferTime: item.acceptedAt ? this.$moment(item.acceptedAt).format('YYYY-MM-DD HH:mm:ss') : '- -',
								transferScenarioName: item.bizScenarioName ? item.bizScenarioName : '- -',
								transferAgentId: item.agentName ? item.agentName : '- -',
								customerRole: item.customerRole ? item.customerRole : '- -',
								transferResult: item.transferType === 'normal' ? '- -' : this.getTransferResult(item.transferResult),
								transferReason: item.transferReason ? item.transferReason : '- -',
								failReason: this.getFailReason(item.failReason),
								transferType: this.getTransferType(item.transferType),
								hasBizflow: item.hasBizflow || false,
								endTime: item.terminatedAt ? this.$moment(item.terminatedAt).format('YYYY-MM-DD HH:mm:ss') : '- -'
							};
						});
						resolve(this.tableData.tableConent);
					})
					.catch(err => {
						this.$requestApiError(err, () => {
							this.$router.push('/');
						});
						console.log(err);
						reject(err);
					});
			});
		},
		async WorkFlowConditionDetail(row) {
			try {
				const { data } = await getWorkflowCompletedDetail({ sessionId: this.sessionId, invitationId: row.invitationId });
				if (data.execInfo.bizFlowType === 'ai') {
					this.workFlow = data.execInfo.bizFlowSnapshot;
					this.allfinshedNodes = data.steps.map(node => node.stepName);
					this.showBpmn = true;
				} else {
					this.workFlowData.tableConent = data.steps.map(item => {
						return {
							workFlowStep: item.stepName,
							operatorID: item.agentName ? item.agentName : '- -',
							finishCondition: item.stepResult ? '已完成' : '未完成',
							finishTime: item.endAt ? this.$moment(item.endAt).format('YYYY-MM-DD HH:mm:ss') : '- -'
						};
					});
					this.showWorkFlowCondition = true;
				}
			} catch (e) {
				this.$message.error('获取工作流完成情况失败！');
				console.log(e);
			}
		},

		closeWorkFlowCondition() {
			this.showWorkFlowCondition = false;
		},
		// 改变每页条数
		changeTransferPageSize(val) {
			this.checkData.pageSize = val;
			this.checkData.page = 1;
			this.initTransferRecordList();
		},
		// 改变当前页数
		changeTransferCurrentPage(val) {
			this.checkData.page = val;
			this.initTransferRecordList();
		},
		closeAiWorkFlow() {
			this.showBpmn = false;
		},
		// 转接结果
		getTransferResult(value) {
			let result = '';
			switch (value) {
				case 'success':
					result = '成功';
					break;
				case 'fail':
					result = '失败';
					break;
				default:
					result = '- -';
					break;
			}
			return result;
		},
		// 失败原因
		getFailReason(val) {
			let result = '';
			switch (val) {
				case 'canceled':
					result = '取消';
					break;
				case 'notfound':
					result = '无坐席在线';
					break;
				case 'timeout':
					result = '呼叫超时';
					break;
				case 'offday':
					result = '不在工作日';
					break;
				case 'offtime':
					result = '不在工作时间';
					break;
				case 'scenariodisabled':
					result = '场景停用';
					break;
				case 'rejected':
					result = '坐席拒绝';
					break;
				case 'ringingTimeout':
					result = '振铃超时';
					break;
				case 'scenarioRolesNotMatched':
					result = '角色名有误';
					break;
				case 'ban':
					result = '黑名单用户呼叫';
					break;
				default:
					result = '- -';
					break;
			}
			return result;
		},
		// 接听类型
		getTransferType(val) {
			let result = '';
			switch (val) {
				case 'normal':
					result = '初始会话';
					break;
				case 'artificial':
					result = '转人工';
					break;
				case 'multiple':
					result = '转三方';
					break;
				case 'bizscenario':
					result = '场景转接';
					break;
				case 'forcejoin':
					result = '强插';
					break;
				case 'invite':
					result = '链接邀请';
					break;
				case 'ai-invite-multiple-human':
					result = '邀请人工三方';
					break;
				case 'transfer-agent':
					result = '坐席转接';
					break;
				default:
					result = '- -';
					break;
			}
			return result;
		}
	}
};
</script>
<style lang="less" scoped>
.transferRecord {
	padding-top: 40px;
	padding-left: 18px;
}
.detail-btn {
	background: #6384fe;
	color: #fff;
	border-radius: 4px;
}
</style>

<style lang="less">
.transferRecord {
	.table .el-table th {
		background: #f8f8f9;
	}
}
</style>
